.nav-main .nav-span .nav-link {
    text-decoration: none !important;
    display: block;
    color: #1b2f32;
    width: auto;
    min-width: 140px;
    line-height: 40px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    padding: 0 40px;
}
.nav-main {
    z-index: 10;
    display: flex;
    top: 10px;
    position: fixed;
    width: 100%;
    min-width: 1024px;
    p{
        position: absolute;
        top: -7px;
        right: 50px;
        color: rgb(130, 140, 156);
        font-size: 30px;
    }
}

#bg {
	width: 1000px;
	height: 1000px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /*  水平居中 垂直居中 */
	/* background: pink; */
	transition: all 2s;  /* 过渡尽量本身上写 谁做动画，写到谁身上 */
}
.rotate {
	transform: translate(-50%, -50%) rotateZ(-60deg)!important; /*  提高权重 */
}
.row1 .orb1, .row1  .orb2 {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin-top: -280px;
	margin-left: -30px;
}
.row1 .orb2 {
	margin-top: -280px;
	margin-left: 500px;
}
.row1  div, 
.row2  div,
.row3  div
{
	/* background:-webkit-linear-gradient(起始位置, 起始颜色， 结束颜色) */
	background:-webkit-linear-gradient(top, #fff, #dedede);
	border-radius: 50%;
}
.row2 .orb1, 
.row2 .orb2, 
.row2 .orb3
{
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin-top: -280px;
	margin-left: -500px;
}
.row2 .orb2 {
	margin-top: -180px;
	margin-left: 500px;
}
.row2 .orb3 {
	margin-top: 50px;
	margin-left: 0px;
}
.row3 .orb1, .row3  .orb2 {
	position: absolute;
	width: 500px;
	height: 500px;
	top: 50%;
	left: 50%;
	margin-top: 0;
	margin-left: 0;
}
.row3  .orb2 {
	margin-top: 100px;
	margin-left: 1000px;
}
/* 动画组 */
.row1  div {
	animation: orbmove 100s linear infinite;
}
.row2  div {
	animation: orbmove 40s linear infinite;
}
.row3  div {
	animation: orbmove 80s linear infinite;
}
@keyframes orbmove{
	from {
	   transform: translateX(0px) rotate(0deg);
	   /* translate 相当于相对定位， 从自己现在的位置开始移动距离 */
	}

	to {
		transform: translateX(-2000px) rotate(-3600deg);
	}
}